import waves from "@/directive/waves";
import { mapGetters } from 'vuex';
import CreateMenu from './components/create-menu/create-menu'
import CreateCode from './components/create-code/create-code'
import {
  getMenuTreeApi,
  deleteSelectedMenuApi,
  getMenuPermissionsApi,
  deletePermissionApi
} from "./module-management.service";
import { alertMessage, alertWithCallback } from "@/utils/utils";
import { getTopNavList } from '@/utils/auth'

export default {
  name: "module-management",
  components: { CreateMenu, CreateCode },
  directives: { waves },
  data() {
    return {
      treeData: [], // 菜单列表
      createOrEditMenuDialogVisible: false, // 菜单弹窗
      menuType: '', // 菜单类型
      selectMenu: '', // 选中的菜单
      createOrEditCodeDialogVisible: false, // 操作码弹窗
      codeType: '', // 操作码类型
      selectCode: '', // 选中的操作码
      keyCodeList: [],
      pid: 0,
      keyCodeData: {},
      activeNavName: '',
      topNavList: JSON.parse(getTopNavList())
    }
  },
  computed: {
    ...mapGetters([
      'codesCheck'
    ])
  },
  created() {
    this.activeNavName = this.topNavList[0].objectId;
    this.getSysStructsTree();
  },
  methods: {
    // 获取模块树
    getSysStructsTree() {
      const postData = {
        applicationId: this.activeNavName
      }
      getMenuTreeApi(postData).then(res => {
        this.treeData = res.data;
        this.keyCodeList = [];
      });
    },

    handleClick() {
      this.getSysStructsTree();
    },

    // 打开创建/编辑菜单弹窗
    openCreateOrEditMenuDialog(type, row) {
      this.menuType = type;
      this.selectMenu = row;
      this.createOrEditMenuDialogVisible = true
    },

    // 关闭创建/编辑菜单弹窗
    closeCreateOrEditMenuDialog() {
      this.createOrEditMenuDialogVisible = false
    },

    // 打开创建/编辑操作码弹窗
    openCreateOrEditCodeDialog(codeId) {
      if (!this.selectCode) {
        alertMessage('请先选择菜单');
        return
      }
      this.createOrEditCodeDialogVisible = true
    },

    // 关闭创建/编辑操作码弹窗
    closeCreateOrEditCodeDialog() {
      this.createOrEditCodeDialogVisible = false
    },

    // 刷新菜单
    reload() {
      this.getSysStructsTree();
    },

    // 刷新操作码
    reloadCode() {
      this.getCodeList(this.selectCode);
    },

    // 确认删除菜单
    deleteSelectedData(row) {
      alertWithCallback('您确定要删除该模块吗?', '提示').then(() => {
        deleteSelectedMenuApi([row.objectId]).then((res) => {
          alertMessage(res.message);
          this.getSysStructsTree();
        }).catch(() => { }); // 关闭confirm框的回调，不处理的话会报一个js error
      }).catch(() => { }); // 关闭confirm框的回调，不处理的话会报一个js error
    },

    // 获取操作码
    getCodeList(row) {
      this.selectCode = row;
      const params = {
        menuCode: row.code,
        pageNum: 1,
        recordNum: 100
      }
      getMenuPermissionsApi(params).then((res) => {
        this.keyCodeList = res.data;
      }).catch(() => { }); // 关闭confirm框的回调，不处理的话会报一个js error
    },

    // 删除操作码
    confirmDeleteKeyCode(row) {
      alertWithCallback('您确定要删除该模块吗?', '提示').then(() => {
        deletePermissionApi([row.objectId]).then((res) => {
          alertMessage(res.message);
          this.getCodeList(this.selectCode);
        }).catch(() => { }); // 关闭confirm框的回调，不处理的话会报一个js error
      }).catch(() => { }); // 关闭confirm框的回调，不处理的话会报一个js error
    }
  }
}
